<template>
	<view class="container">
		<!-- 订单分类 -->
		<view class="orderTypes">
			<view class="typeBox" v-for="(item,index) in orderType" :key="index" :class="typeIndex == index ? 'active':''" @click="changeType(index)">
				{{ item.title }}
				<span class="mores"></span>
			</view>
		</view>

		<view class="fodders-box">
			<view class="fodderstitle" v-if="photographerShareMode !== '1v1' ">
				<view v-for="(item,index) in fodderTypes" :key="index" @click="toGetShaixuan(index)">
					<text>{{ item.title }}</text>
					<i></i>
				</view>
			</view>
			<!--  ref：唯一ref pullDown:下拉刷新事件  onReachBottom：上拉加载事件 -->
			<!-- 约拍 -->
			<cc-pullScroolView ref="pullScroll" :back-top="true" v-if="photographerShareMode === '1v1' ">
				<!-- 列表组件 -->
				<CCBProjectList></CCBProjectList>
				<view class="video-Box">
					<view v-for="(item,index) in fodderList" :key="index" class="lists">
						<image :class="{'mask':addYuePaiList.some(asc => asc.mediaId === item.mediaId)}"
							:src="item.coverUrl" v-if="item.coverUrl" mode="widthFix" @click="preview(item, index)"></image>
						<!-- <image v-show="addCarList.some(asc => asc.mediaId === item.mediaId)" class="maskicon"
							:src="imageUrl + 'xuanzhong.png'" mode=""></image> -->
						<view class="play">
							<image @click="preview(item, index)" :src="imageUrl + 'index/play-index.png'" mode="aspectFit"></image>
						</view>
						<p>
							<span>{{timesModes(item.duration) + '"'}}</span>
							<b>
								<span @click.stop="toDeteleYuePai(item, index)">
									<image
										:src="imageUrl + 'index/shanchu.png'"
										mode="aspectFit"></image>
									<i>如果不是我请点击</i>
								</span>
								<span @click="toAddYuePaiCar(item, index)">
									<image
										:src="addYuePaiList.some(asc => asc.mediaId === item.mediaId) ? imageUrl + 'index/jiagouOk.png' : imageUrl + 'index/jiagou.png'"
										mode="aspectFit"></image>
									<i>添加</i>
								</span>
							</b>
						</p>
					</view>
				</view>
			</cc-pullScroolView>
			
			<!-- AIGC-->
			<cc-pullScroolView ref="pullScroll" :back-top="true" v-else>
				<!-- 列表组件 -->
				<CCBProjectList></CCBProjectList>
				<view class="video-Box">
					<view v-for="(item,index) in fodderList" :key="index" class="lists">
						<image :class="{'mask':addCarList.some(asc => asc.mediaId === item.mediaId)}"
							:src="item.coverUrl" v-if="item.coverUrl" mode="widthFix" @click="preview(item, index)"></image>
						<!-- <image v-show="addCarList.some(asc => asc.mediaId === item.mediaId)" class="maskicon"
							:src="imageUrl + 'xuanzhong.png'" mode=""></image> -->
						<view class="play">
							<image @click="preview(item, index)" :src="imageUrl + 'index/play-index.png'" mode="aspectFit"></image>
						</view>
						<p>
							<span>{{timesModes(item.duration) + '"'}}</span>
							<b>
								<span @click.stop="toDetele(item, index)">
									<image
										:src="imageUrl + 'index/shanchu.png'"
										mode="aspectFit"></image>
									<i>如果不是我请点击</i>
								</span>
								<span @click="toAddCar(item, index)">
									<image
										:src="addCarList.some(asc => asc.mediaId === item.mediaId) ? imageUrl + 'index/jiagouOk.png' : imageUrl + 'index/jiagou.png'"
										mode="aspectFit"></image>
									<i>添加</i>
								</span>
							</b>
						</p>
						<!-- <p @click.stop="toDetele(item, index)">
							<span>
								<i>
									<uni-icons type="clear"></uni-icons>
									<b>如果不是我请点击</b>
								</i>
								<i style="color: #ffffff;">{{item.time}}</i>
							</span>
						</p> -->
					</view>
				</view>
			</cc-pullScroolView>
		</view>

		<!-- 暂无素材  v-show="this.orderInfo.length === 0"-->
		<view class="fodderNull" v-if="this.fodderList.length === 0">
			<view class="fodderNullTips">
				<b>暂无数据</b>
				<p>您好，暂未找到您的素材，可前往首页重新提交个人认证以便于AI获取</p>
				<span>
					<button @click="zijiFound">自己逛逛</button>
					<button @click="aiFound">让AI找找</button>
				</span>
			</view>
		</view>

		<view class="shop-car">
			<view class="car-icons" v-if="photographerShareMode === '1v1' ">
				<view class="car-image">
					<image :src="imageUrl + 'index/toShopCar.png'" mode="widthFix"></image>
					<i>{{ YuePaiNun }}</i>
				</view>
				<p>已选中 {{ YuePaiNun }} 个素材</p>
			</view>
			<view class="car-icons" v-else>
				<view class="car-image" @click="toCurPages('/pages/shoopcar/index')">
					<image :src="imageUrl + 'index/toShopCar.png'" mode="widthFix"></image>
					<i>{{ cartNun }}</i>
				</view>
				<p>已选中 {{ cartNun }} 个素材</p>
			</view>
			
			<view class="to-shop-car" v-if="photographerShareMode === '1v1' ">
				<!-- <button @click="toCurPages('/pages/fodder/kongjing')">加空镜素材</button> -->
				<button @click="toYuePai">约拍下单</button>
			</view>
			<view class="to-shop-car" v-else>
				<!-- <button @click="toCurPages('/pages/fodder/kongjing')">加空镜素材</button> -->
				<button @click="toCurPages('/pages/shoopcar/index')">查看购物车</button>
			</view>
		</view>
		<!-- 视频播放弹窗 -->
		<uni-popup ref="popupskiingVideo" class="skiingVideo-Box">
			<view class="skiingVideo-list">
				<view class="title">
					<uni-icons type="closeempty" @click="toCloseVideo()"></uni-icons>
					<span>素材预览</span>
				</view>
				<video style="width:100%" v-if="videoUrl" :src="videoUrl">
					<view class="shuiyin">哇咔咔wakaka</view>
					<image @click="previewImage(indexfodderList.image)" v-if="!videoUrl" :src="indexfodderList.image"
						mode="widthFix"></image>
					<!-- 加入·购物车-->
					<!-- 约拍 -->
					<view v-if="mediaType === 'yuepai' " class="skiingVideo-button" :class="indexVideoIsLike?'active':''">
						<!-- <uni-icons @click="linkYuePaiBtn" type="cart-filled"></uni-icons> -->
						<image @click="linkYuePaiBtn" :src="isCartBtn ? imageUrl + 'index/jiagouOk.png' : imageUrl + 'index/jiagou.png'" mode="aspectFit"></image>
					</view>
					<!-- aigc -->
					<view v-else class="skiingVideo-button" :class="indexVideoIsLike?'active':''">
						<!-- <uni-icons @click="linkBtn" type="cart-filled"></uni-icons> -->
						<image @click="linkBtn" :src="isCartBtn ? imageUrl + 'index/jiagouOk.png' : imageUrl + 'index/jiagou.png'" mode="aspectFit"></image>
					</view>
				</video>
				
				<!-- <view class="btn">
					<button class="dontMe" @click="deleteBtn">不是我</button>
					<button class="addSucai" @click="addCar">{{ addCarName }}</button>
				</view> -->
			</view>
		</uni-popup>
		<uni-popup ref="shaixuanType" type="top">
			<view class="scrollIconsBox">
				<view v-for="(item,index) in skiType" :class="skiTypeIndex == index ? 'active':''" :key="index" @click="toShowList(index,'type')">{{item.text}}</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="shaixuanMore" type="top">
			<view class="scrollIconsBox">
				<view v-for="(item,index) in trackType" :class="trackTypeIndex == index ? 'active':''" :key="index" @click="toShowList(index,'more')">{{item.text}}</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="shaixuanTime" type="top">
			<view style="size: 22rpx; color: #535151; padding: 40rpx 20rpx; display: flex; align-items: center; font-size: 24rpx; color: #535151; justify-content: space-between;background-color: #ffffff;">
				<span>{{ changeToTime(priceValue[0],skiTypeIndex )}}</span>
				<view style="width: 70%;">
					<!-- 设置滑块最小为9的两倍，为设置一步为1做铺垫 -->
					<slider :value="priceValue[1]*2" @change="blockMoving" :min="18" :max="42" :step="1" activeColor="#A7CCEF" backgroundColor="#A7CCEF" block-color="#4CA2EC" block-size="20" />
					
					<!-- <slider-range :value="priceValue" :min="9" :max="21" :step="0.5" :bar-height="15" :block-size="20"
						block-color="#4CA2EC" background-color="#FFFFFF" active-color="#A7CCEF" :format="format"
						:decorationVisible="true" @change="blockMoving"></slider-range> -->
				</view>
				<span>{{ changeToTime(priceValue[1],skiTypeIndex) }}</span>
			</view>
		</uni-popup>
		
		
	</view>
</template>

<script>
	import CCBProjectList from '@/uni_modules/cc-pullScroolView/components/cc-pullScroolView/cc-pullScroolView.vue'
	import videoPlay from '@/pages/index/components/video-play/video-play.vue'
	import SliderRange from '../../components/slider-range/index.vue'
	// 直接使用办法
	import utils from '@/components/shoyu-date/utils.filter.js';
	import {
		searchMedia,
		getMediaInfoi,
		deleteMedia
	} from '@/api/service.js'
	import {
		setCartList,
		getCartList,
		getUserData,
		setYuePaiList,
		getYuePaiList,
	} from '@/utils/storage.js'
	import imageConfig from '@/utils/images.js'
	export default {
		components: {
			SliderRange,
			videoPlay,
			CCBProjectList
		},
		data() {
			return {
				isCartBtn: false, // 视频弹窗加入购物车
				videoUrl: '', // 预览视频地址
				pageNo: 1, // 加载数据页数
				pageTotal: 10, // 数据总数
				mediaType: "", // 素材类型
				imageUrl: imageConfig.uploadImageUrl,
				priceValue: [11, 12], // 可以指定默认值
				// 声明时间方法
				utils: utils,
				orderType:[
					{title:'AIGC'},
					{title:'约拍'}
				],
				trackTypeIndex:0,
				skiTypeIndex:0,
				listBoxWidth:0,
				TypeBoxWidth:0,
				typeIndex:0,
				// 素材类型
				materialType: [
					{
						value: 0,
						text: "视频"
					},
					{
						value: 1,
						text: "图片"
					}
				],
				trackType: [{
						value: 0,
						text: "全部"
					}
				],
				skiType: [
					{
						value: 0,
						text: "全部"
					},
					{
						value: 1,
						text: "视频"
					},
					{
						value: 2,
						text: "照片"
					},
					{
						value: 3,
						text: "音频"
					}
				],
				fodderTypes:[
					{title:'时间'},
					{title:'类型'},
					{title:'更多'}
				],
				// 拖动方法的位置
				timeRange: {
					rangeMin: 5,
					rangMax: 200,
					rangeValue: [10, 50]
				},
				// 时间承载数组
				nowData: {
					now: '',
					start: '',
					over: ''
				},
				selected: [0],
				indexVideoIsLike: false,
				// indexVideoIsCar: false,
				// 全部素材数据
				fodderList: [],
				// 是否在购物车
				addCarName: '添加素材',
				// 存放弹窗素材数据
				indexfodderList: null,
				// 加入购物车的素材
				addCarList: getCartList() || [],
				// 购物车数量
				cartNun: 0,
				// 存放删除数据
				delId: null,
				todayData: '', // 承载今天年月日的字段
				// 约拍
				// 全部素材数据
				// fodderList: [],
				// 是否在购物车
				addCarYuePai: '添加素材',
				// 存放弹窗素材数据
				indexYuePaiList: null,
				// 加入购物车的素材
				addYuePaiList: getYuePaiList() || [],
				// 购物车数量
				YuePaiNun: 0,
				// 存放删除数据
				delYuePaiId: null,
				photographerShareMode: "share",
			}
		},
		onLoad(options) {
			// this.mediaType = options.type
			this.yupaiType(options)
		},
		onShow() {
			this.uploadCarList()
			this.uploadYuePaiList()
		},
		mounted() {
			this.getDatas()
			// this.getVideos()

		},
		// 上拉加载
		onReachBottom() {
			if (this.pageNo === Math.ceil(this.pageTotal / 10)) {
				this.$refs.pullScroll.finish();
				// console.log('当前数:', this.fodderList.length, '总数:', this.pageTotal)
			} else {
				this.$refs.pullScroll.showUpLoading()
				console.log('上拉加载', this.pageNo)
				searchMedia({
					Action: 'SearchMedia',
					userId: getUserData().id,
					mediaType: this.mediaType,
					photographerShareMode:this.photographerShareMode,
					ownerType: 'Public',
					mamEntityId: 'SkiingClip',
					pageNo: ++this.pageNo,
					pageSize: 10
				}).then(res => {
					console.log(res, 'aaaa')
					this.fodderList = [...this.fodderList, ...res.mediaInfoList]
					
				})
			}
		},
		methods: {
			yupaiType(options){
				if(options.type == 'yuepai'){
					this.typeIndex = 1
					this.photographerShareMode = '1v1'
					console.log(options.type,"options")
				}
			},
			toShowList(index,id){
				if (index === 0) {
					this.mediaType = ""
				} else if(index === 1) {
					this.mediaType = "Video"
				} else if (index === 2) {
					this.mediaType = "Image"
				} else {
					this.mediaType = "Audio"
				}
				this.getVideos()
				if(id == "type"){
					this.skiTypeIndex = index
				}else if(id == "more"){
					this.trackTypeIndex = index
				}
			},
			toGetShaixuan(index){
				if(index == 0){
					this.$refs.shaixuanTime.open()
				}else if(index == 1){
					this.$refs.shaixuanType.open()
				}else if(index == 2){
					this.$refs.shaixuanMore.open()
				}
			},
			timesModes(time){
				const times = new Date(time * 1000).toISOString().substr(14, 5).replace(
					':', "'")
				return times
			},
			// 约拍下单
			toYuePai() {
					uni.navigateTo({
						url:"/pages/order/components/order-goods?selectData="+ encodeURIComponent(JSON.stringify(this.addYuePaiList)) + "&type=yuepai"
					})	
			},
			changeType(index){
				console.log(index,"约拍，AIGC")
				// if (index === 1) {
				// 	uni.navigateTo({
				// 		url:"/pages/order/components/order-goods?selectData="+ encodeURIComponent(JSON.stringify(this.fodderList))
				// 	})
				// }
				if(index === 0) {
					this.photographerShareMode = 'share'
				} else {
					this.photographerShareMode = '1v1'
				}
				this.getVideos()
				this.typeIndex = index
			},
			changeToTime(time,type) {
				let data = time + ""
				// this.getVideos()
				if (data.includes(".")) {
					let newData = data.split(".")
					return newData[0] + ":30"
				} else {
					return data + ":00"
				}
			},
			// 更新加入购物车数据
			uploadCarList() {
				this.addCarList = getCartList() || []
				console.log('更新加入购物车数据',this.addCarList)
				if(this.addCarList.length){
					this.cartNun = this.addCarList.length
				}
				
			},
			uploadYuePaiList() {
				this.addYuePaiList = getYuePaiList() || []
				console.log('更新加入购物车数据',this.addYuePaiList)
				if(this.addYuePaiList.length){
					this.YuePaiNun = this.addYuePaiList.length
				}
				
			},
			blockStart() {
				// console.log('滑动触发')
			},
			blockMoving(e) {
				
				this.priceValue = [e.detail.value / 2 - 1 , e.detail.value / 2]
				console.log(this.priceValue,'这是什么，有值吗？')
					if (this.priceValue[1] + "".includes(".")) {
						const hs = this.priceValue[1] + "".split(".")
						const h1 = Number(hs-1) >= 9 ? "0" + (hs-1) : "" + (hs-1)
						const h2 = Number(hs) >= 9 ? "0" + hs : "" + hs
						this.timeRange.rangeValue = [
							this.todayData + ' ' + h1 + '30:00',
							this.todayData + ' ' + h2 + '30:00'
						]
					} else {
						const h1 = this.priceValue[1] >= 9 ? "0" + Number(this.priceValue[1])-1 : "" +  Number(this.priceValue[1])-1
						const h2 = this.priceValue[1] >= 9 ? "0" + this.priceValue[1] : "" + this.priceValue[1]
						this.timeRange.rangeValue = [
							this.todayData + ' ' + h1 + '00:00',
							this.todayData + ' ' + h2 + '00:00'
						]
					}

				console.log(e)
				this.getVideos()
			},
			blockEnd() {
				console.log('滑动结束', this.priceValue)
			},
			// 下拉菜单
			change(e) {
				console.log("e:", e);
			},
			format(val) {
				// const newData = utils.timeTodate('H:i', val)
				// return newData
			},
			handleRangeChange(e) {
				this.rangeValue = e


			},
			// 图片预览
			previewImage(img) {
				uni.previewImage({
					current: img,
					urls: [img],
					success() {
						console.log('图片预览成功');
						console.log(img);
					},
					fail(err) {
						console.log('图片预览失败', err);
						console.log(img);
					}
				});
			},
			// 不是我的素材
			toDetele(item, index) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除该素材吗？',
					confirmText: '确定',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							console.log(item, 'del')
							// deleteMedia({
							// 	Action: 'DeleteMedia',
							// 	userId: getUserData().id,
							// 	mediaId: item.mediaId
							// }).then(res => {
							// 	console.log(res,'del')
							// 	this.getVideos()
							// })
							// 用户点击了确定按钮，执行删除操作
							// 正式数据id删除
							// const id = item.id || this.ids
							// 测试数据index删除
							const id = index || this.delId
							this.fodderList.splice(id, 1)
							// 同时删除购物车的素材
							// this.addCarList = this.addCarList.filter(i => i.id !== item.id)
							setCartList(this.addCarList)
							this.$refs.popupskiingVideo.close()
						}
					}
				});
			},
			// 不是我的素材
			toDeteleYuePai(item, index) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除该素材吗？',
					confirmText: '确定',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							console.log(item, 'del')
							// deleteMedia({
							// 	Action: 'DeleteMedia',
							// 	userId: getUserData().id,
							// 	mediaId: item.mediaId
							// }).then(res => {
							// 	console.log(res,'del')
							// 	this.getVideos()
							// })
							// 用户点击了确定按钮，执行删除操作
							// 正式数据id删除
							// const id = item.id || this.ids
							// 测试数据index删除
							const id = index || this.delYuePaiId
							this.fodderList.splice(id, 1)
							// 同时删除购物车的素材
							// this.addYuePaiList = this.addYuePaiList.filter(i => i.id !== item.id)
							setYuePaiList(this.addYuePaiList)
							this.$refs.popupskiingVideo.close()
						}
					}
				});
			},
			// 弹窗删除
			deleteBtn() {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除该素材吗？',
					confirmText: '确定',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							console.log(this.indexfodderList, '不是我')
							// deleteMedia({
							// 	Action: 'DeleteMedia',
							// 	userId: getUserData().id,
							// 	mediaId: this.indexfodderList.mediaId
							// }).then(res => {
							// 	console.log(res,'del')
							// 	this.getVideos()
							// })

							this.$refs.popupskiingVideo.close()
						}
					}
				});
			},
			getDatas() {
				let date = new Date(); //Fri Oct 29 2021 16:37:56 GMT+0800 (CST)
				let timestamp = new Date().getTime(); //1635496676223		(毫秒级)
				let y = date.getFullYear(); //获取完整的年份(4位)
				let m = date.getMonth(); //获取当前月份(0-11,0代表1月)
				let d = date.getDate(); //获取当前日(1-31)
				// let w = date.getDay(); //获取当前星期X(0-6,0代表星期天)
				let h = date.getHours(); //获取当前小时数(0-23)
				let i = date.getMinutes(); //获取当前分钟数(0-59)
				// let s = date.getSeconds(); //获取当前秒数(0-59)


				const targetDate = new Date(date);

				// targetDate.setHours(9, 0, 0, 0);
				// const startTime = targetDate.getTime();

				// targetDate.setHours(21, 0, 0, 0);
				// const endTime = targetDate.getTime();
				// 判断如果早上9点之前或者晚上10点之后时间戳中间部分为16:00
				if (h >= 21 || h < 9) {
					h = 15
				}
				if (i >= 30) {
					// 用于接口调用使用这个数组
					this.timeRange.rangeValue[1] = this.dataChanges(y, m, d, h, '30')
					this.timeRange.rangeValue[0] = this.dataChanges(y, m, d, h - 1, '30')
					this.getVideos()
					// 用于初次展示使用这个数组
					this.priceValue[1] = Number(h + '.5')
					this.priceValue[0] = Number((h - 1) + '.5')
					// console.log(this.timeRange)
				} else {
					this.timeRange.rangeValue[1] = this.dataChanges(y, m, d, h, '00')
					this.timeRange.rangeValue[0] = this.dataChanges(y, m, d, h - 1, '00')
					this.getVideos()
					// 用于初次展示使用这个数组
					this.priceValue[1] = Number(h)
					this.priceValue[0] = Number(h - 1)
					// console.log(this.timeRange)
				}
			},
			dataChanges(y, m, d, h, more) {
				const ms = (m + 1) <= 9 ? '0' + (m + 1) : (m + 1) + ''
				const ds = d <= 9 ? '0' + d : d + ''
				const hs = h <= 9 ? '0' + h : h + ''
				const dataOnshow = y + "-" + ms + "-" + ds + " " + hs + ":" + more + ":00"
				this.todayData = y + "-" + ms + "-" + ds
				return dataOnshow
				// console.log(dataOnshow,'看看格式拼对没，对了返回回去吧')
			},
			// 打开素材弹窗
			preview(item, index) {
				getMediaInfoi({
					Action: 'GetMediaInfo',
					userId: getUserData().id,
					mediaId: item.mediaId,
					urlUseage: 'Play'
				}).then(res => {
					console.log(res, '视频播放数据')
					this.videoUrl = res.GetMediaInfoResult.MediaInfo.FileInfoList[0].FileBasicInfo.FileUrl
					console.log(this.videoUrl)
				})
				// 正式数据id删除
				// this.delYuePaiId = item.id 
				// 测试数据index删除
				if(this.photographerShareMode === '1v1') {
					this.delYuePaiId = item.id
					console.log(this.delYuePaiId,'this.delYuePaiId')
					this.indexfodderList = item
					this.$refs.popupskiingVideo.open("bottom")
					
					if (this.addYuePaiList.some(item => item.mediaId === this.indexfodderList.mediaId)) {
						this.isCartBtn = true
					} else {
						this.isCartBtn = false
					}
					setYuePaiList(this.addYuePaiList)
					this.uploadYuePaiList()
				} else {
					this.delId = item.id
					console.log(this.delId,'this.delId')
					this.indexfodderList = item
					this.$refs.popupskiingVideo.open("bottom")
					
					if (this.addCarList.some(item => item.mediaId === this.indexfodderList.mediaId)) {
						this.isCartBtn = true
					} else {
						this.isCartBtn = false
					}
					setCartList(this.addCarList)
					this.uploadCarList()
				}
			},
			// 直接添加怎么加
			toAddCar(item, index){
				getMediaInfoi({
					Action: 'GetMediaInfo',
					userId: getUserData().id,
					mediaId: item.mediaId,
					urlUseage: 'Play'
				}).then(res => {
					this.videoUrl = res.GetMediaInfoResult.MediaInfo.FileInfoList[0].FileBasicInfo.FileUrl
					console.log(this.videoUrl)
				})
				this.delId = item.id
				this.indexfodderList = item
				setCartList(this.addCarList)
				this.addCar()
			},
			toAddYuePaiCar(item, index){
				getMediaInfoi({
					Action: 'GetMediaInfo',
					userId: getUserData().id,
					mediaId: item.mediaId,
					urlUseage: 'Play'
				}).then(res => {
					this.videoUrl = res.GetMediaInfoResult.MediaInfo.FileInfoList[0].FileBasicInfo.FileUrl
					console.log(this.videoUrl)
				})
				this.delYuePaiId = item.id
				this.indexfodderList = item
				setYuePaiList(this.addYuePaiList)
				this.addYuePaiCar()
			},
			
			
			// 加入购物车
			linkBtn() {
				if (this.addCarList.some(item => item.mediaId === this.indexfodderList.mediaId)) {
					this.isCartBtn = false
					this.cartNun -= 1
					this.addCarList = this.addCarList.filter(item => item.mediaId !== this.indexfodderList.mediaId);
					setCartList(this.addCarList)
					return
				}
				this.isCartBtn = true
				let aa = getCartList('cart_list') ? getCartList('cart_list') : []
				let bb = []
				let cc = []
				bb.push(this.indexfodderList)
				cc = aa.concat(bb)
				this.addCarList = cc
				console.log('this.addCarList----------: ', this.addCarList)
				this.cartNun += 1
				setCartList(this.addCarList)
			},
			// 加入购物车
			linkYuePaiBtn() {
				if (this.addYuePaiList.some(item => item.mediaId === this.indexfodderList.mediaId)) {
					this.isCartBtn = false
					this.YuePaiNun -= 1
					this.addYuePaiList = this.addYuePaiList.filter(item => item.mediaId !== this.indexfodderList.mediaId);
					setYuePaiList(this.addYuePaiList)
					return
				}
				this.isCartBtn = true
				let aa = getYuePaiList() ? getYuePaiList() : []
				let bb = []
				let cc = []
				bb.push(this.indexfodderList)
				cc = aa.concat(bb)
				this.addYuePaiList = cc
				console.log('this.addYuePaiList----------: ', this.addYuePaiList)
				this.YuePaiNun += 1
				setYuePaiList(this.addYuePaiList)
			},
			
			
			// 关闭素材弹窗
			toCloseVideo() {
				this.$refs.popupskiingVideo.close()
			},
			// 添加素材
			addCar() {
				if (this.addCarList.some(item => item.mediaId === this.indexfodderList.mediaId)) {
					this.$refs.popupskiingVideo.close()
					this.addCarList = this.addCarList.filter(item => item.mediaId !== this.indexfodderList.mediaId);
					setCartList(this.addCarList)
					this.cartNun -= 1
					uni.showToast({
						title: '取消添加',
						icon: 'error',
						mask: true
					})
					return
				}
				let aa = getCartList('cart_list') ? getCartList('cart_list') : []
				let bb = []
				let cc = []
				bb.push(this.indexfodderList)
				cc = aa.concat(bb)
				this.addCarList = cc
				console.log('this.addCarList----------: ', this.addCarList)
				this.cartNun += 1
				setCartList(this.addCarList)
				this.$refs.popupskiingVideo.close()
				uni.showToast({
					title: '添加成功',
					icon: 'success',
					mask: true
				})
			},
			// 添加素材
			addYuePaiCar() {
				if (this.addYuePaiList.some(item => item.mediaId === this.indexfodderList.mediaId)) {
					this.$refs.popupskiingVideo.close()
					this.addYuePaiList = this.addYuePaiList.filter(item => item.mediaId !== this.indexfodderList.mediaId);
					setYuePaiList(this.addYuePaiList)
					this.YuePaiNun -= 1
					uni.showToast({
						title: '取消添加',
						icon: 'error',
						mask: true
					})
					return
				}
				let aa = getYuePaiList() ? getYuePaiList() : []
				let bb = []
				let cc = []
				bb.push(this.indexfodderList)
				cc = aa.concat(bb)
				this.addYuePaiList = cc
				console.log('this.addYuePaiList----------: ', this.addYuePaiList)
				this.YuePaiNun += 1
				setCartList(this.addYuePaiList)
				this.$refs.popupskiingVideo.close()
				uni.showToast({
					title: '添加成功',
					icon: 'success',
					mask: true
				})
			},
			// 获取视频列表
			getVideos() {
				// const times = JSON.stringify('between ' + this.timeRange.rangeValue[0] + ' and ' + this.timeRange.rangeValue[1])
				searchMedia({
					Action: 'SearchMedia',
					userId: getUserData().id,
					mediaType: this.mediaType,
					photographerShareMode:this.photographerShareMode,
					// ownerType: 'Public',
					ownerType: 'Public',
					mamEntityId: 'SkiingClip',
					ExtendMatch: 'between ' + this.timeRange.rangeValue[0] + ' and ' + this.timeRange.rangeValue[1],
					pageNo: 1,
					pageSize: 10
				}).then(res => {
					console.log(res, 'aaaa')
					this.fodderList = res.mediaInfoList
					this.pageTotal = res.total
				})

			},
			// 跳转购物车页面
			toCurPages(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 自己找找
			zijiFound() {
				// searchMedia({
				// 	Action: 'SearchMedia',
				// 	userId: getUserData().id,
				// 	mediaType: 'Image',
				// 	ownerType: 'Group',
				// 	mamEntityId: 'SkiingClip',
				// 	pageNo: this.pageNo,
				// 	pageSize: 10
				// }).then(res => {
				// 	console.log(res, 'aaaa')
				// 	this.fodderList = res.mediaInfoList
				// })
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			// ai找
			aiFound() {
				if(uni.getStorageSync("attestationFlag")) {
					uni.showToast({
						title:"未找到素材",
						icon:"none"
					})
				} else {
					uni.showToast({
						title:"请先注册",
						icon:"none"
					})
					setTimeout(() => {
						uni.switchTab({
							url:"/pages/index/index"
						})
					},2000)
				}
			}

		},

	}
</script>
<style lang="less">
	// 去掉uniPopup的padding
	.vue-ref {
		padding: 0 !important;
	}
</style>

<style lang="less" scoped>
	/deep/.uni-data-checklist .checklist-group .checklist-box.is--tag {
		border-radius: 30px;
	}

	/deep/.uni-select {
		height: 26px;
		border: 1px solid #64A9FF;
		border-radius: 18rpx;
	}

	/deep/.uni-select__input-box {
		height: 26px;
	}

	/deep/.uni-select__input-placeholder {
		color: #64A9FF;
	}

	.container {
		width: 100%;
		min-height: 100VH;
		background-color: #f2f6f9;
		box-sizing: border-box;
		overflow: hidden;

		.datetimerange {
			width: 690rpx;
			margin: 30rpx auto;
			margin-top: 0;

			/deep/.range-tip {
				display: none;
			}

			.date-scale {

				padding: 0;
				display: flex;
				justify-content: space-between;

				li {
					position: relative;

					i {
						display: block;
						width: 1rpx;
						height: 12rpx;
						position: relative;
						top: -20rpx;
						background: #888888;
						z-index: 12;
					}

					p {
						width: 1rpx;
						left: 0;
						top: 5rpx;
						position: absolute;
						color: #888888;
						font-size: 24rpx;
						display: flex;
						justify-content: center;
					}

					&:nth-child(even) {
						p {
							top: -80rpx;
						}
					}
				}
			}
		}

		.classify {
			width: 690rpx;
			margin: 30rpx auto;
		}

		.fodders-box {
			margin-top: 20rpx;
			padding-bottom: 200rpx;
			background: #ffffff;
			.fodderstitle{
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 690rpx;
				margin: 0 auto;
				padding-top: 20rpx;
				>view{
					display: flex;
					align-items: center;
					color: #606266;
					font-size: 32rpx;
					i{
						position: relative;
						top: 5rpx;
						margin-left: 5rpx;
						width: 1rpx;
						height: 1rpx;
						border: 8rpx solid;
						border-color: #606266 transparent transparent transparent; 
					}
				}
			}
			.video-Box {
				width: 690rpx;
				margin: 20rpx auto;
				display: grid;
				grid-template-columns: 1fr 1fr;
				grid-gap: 0 20rpx;
				// columns: 2; // 默认列数
				// column-gap: 20rpx; // 列间距
				// margin-top: 20rpx;

				.lists {
							position: relative;
							overflow: hidden;
							width: 100%;
							break-inside: avoid;
							margin-bottom: 20rpx;
						
							>image {
								border-radius: 8rpx;
							}
						
							.play {
								position: absolute;
								right: 20rpx;
								top: 20rpx;
						
								image {
									width: 50rpx;
									height: 50rpx;
								}
							}
						
							video {
								width: 100%;
							}
						
							image {
								width: 100%;
							}
						
							p {
								width: 100%;
								display: flex;
								flex-direction: column;
						
								>span {
									height: 36rpx;
									font-size: 22rpx;
									font-family: Adobe Heiti Std;
									font-weight: normal;
									padding: 0 20rpx;
									color: #ffffff;
									background: rgba(0, 0, 0, 0.5);
									border-radius: 20rpx;
									position: absolute;
									left: 20rpx;
									bottom: 60rpx;
								}
						
								>b {
									display: flex;
									justify-content: space-between;
						
									span {
										display: flex;
										justify-content: center;
										align-items: center;
										font-size: 24rpx;
										color: #86909C;
						
										&.yuepai {
											color: #0085ff;
										}
						
										&.like {
											color: #F53F3F;
										}
						
										image {
											width: 25rpx;
											height: 25rpx;
											margin-right: 10rpx;
										}
									}
								}
							}
						}
			}
		}

		.skiingVideo-list {
			width: 100vw;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #ffffff;
			padding: 0 10rpx 60rpx 10rpx;
			text-align: center;
			box-sizing: border-box;
			position: relative;
			
			.title {
				margin-top: 8VH;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				// position: relative;
				
				/deep/.uni-icons {
					position: absolute;
					left: 20rpx;
					top: 0;
				}
			}

			.skiingVideo-button {
				position: absolute;
				top: 20%;
				right: 30rpx;
				bottom: 100rpx;
				display: flex;
				// flex-direction: column;
				align-items: center;
				// justify-content: flex-start;
				padding: 20rpx 0;
				align-items: center;
				font-size: 32rpx;
				color: #929292;
				text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
			.shuiyin{
				position: absolute;
				width: 300rpx;
				height: 10rpx;
				left:30rpx;
				top:180rpx;
				color: #ffffff;
				font-size: 45rpx;
				opacity: 0.6;
				transform: rotate(-30deg);
				text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果
			}

			.videoBox {
				video {
					width: 100%;
				}
			}

			.btn {
				margin-top: 50rpx;
				display: flex;
				justify-content: space-between;

				.dontMe {
					font-size: 25rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #FFFFFF;
					line-height: 54rpx;
					width: 236rpx;
					height: 54rpx;
					background: #B0B0B0;
					border-radius: 27rpx;
				}

				.addSucai {
					font-size: 25rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #FFFFFF;
					line-height: 54rpx;
					width: 236rpx;
					height: 54rpx;
					background: #A7CCEF;
					border-radius: 27rpx;
				}
			}
		}

		.shop-car {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 750rpx;
			height: 181rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -6rpx 13rpx 0rpx rgba(0, 0, 0, 0.2);
			// border-radius: 36rpx 36rpx 0rpx 0rpx;
			display: flex;
			// flex-direction: column;
			justify-content: space-between;

			.car-icons {
				display: flex;
				padding-left: 30rpx;
				align-items: center;
				height: 100rpx;

				.car-image {
					width: 88rpx;
					height: 88rpx;
					position: relative;
					background: #4CA2EC;
					border-radius: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					image {
						width: 45rpx;
						height: 45rpx;
					}

					i {
						position: absolute;
						left: 62rpx;
						top: 0;
						width: 23rpx;
						height: 23rpx;
						background: #FF0000;
						border-radius: 50%;
						font-size: 14rpx;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						color: #FFFFFF;
						text-align: center;
						line-height: 23rpx;
					}
				}

				p {
					margin-left: 15rpx;
					font-size: 32rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #4CA2EC;
				}
			}

			.to-shop-car {
				display: flex;
				align-items: center;
				height: 100rpx;
				padding-right: 30rpx;

				button {
					width: 254rpx;
					height: 72rpx;
					line-height: 72rpx;
					background: #4CA2EC;
					border-radius: 36rpx;
					font-size: 32rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #FFFFFF;
				}
			}
		}
	}
	.orderTypes{
		width: 690rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		height: 72rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		overflow: hidden;
		border-radius: 10rpx 10rpx 0 0;
		.typeBox{
			width: 50%;
			text-align: center;
			line-height: 72rpx;
			position: relative;
			font-size: 32rpx;
			color:#1D2129;
			.mores{
				width: 72rpx;
				height: 72rpx;
				position: absolute;
				background-color: #4CA2EC;
				transform: skew(30deg, 0deg);
				opacity: 0;
			}
			&.active{
				background-color: #4CA2EC;
				color:#FFFFFF;
				.mores{
					opacity: 1;
				}
			}
			
			&:nth-child(1){
				.mores{
					right: -50rpx;
					top: 0;
					clip-path: inset(0% 0 0% 0 round 0 50% 0 0%);
				}
			}
			&:nth-child(2){
				margin-left: -30rpx;
				
				.mores{
					left: -50rpx;
					top: 0;
					clip-path: inset(0% 0 0% 0 round 0 0% 0 50%);
				}
			}
		}
	}
	.selectData{
		/deep/.uni-select{
				border: 1px solid #ffffff;
				background-color: #ffffff;
			    border-radius: 100rpx;
		}
	}
	.fodderNull{
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		
		.fodderNullTips{
			width: 590rpx;
			height: 432rpx;
			border-radius: 20rpx;
			background: #ffffff;
			box-shadow: 0px 10rpx 40rpx  rgba(0, 0, 0, 0.05);
			
			b{
				font-size: 36rpx;
				color: #22242A;
				text-align: center;
				height: 162rpx;
				line-height: 162rpx;
				display: block;
			}
			p{
				color: #8D92A3;
				padding: 40rpx;
				padding-top: 0;
			}
			span{
				display: flex;
				align-items: flex-end;
				border-top: 2rpx #F1F3F8 solid;
				button{
					width: 50%;
					color: #6478D3;
					background: #ffffff;
					border-radius: 0;
					
					&:nth-child(1){
						color: #8D92A3;
						&::after{
							border-radius: 0;
							border-right:2rpx #F1F3F8 solid;
							margin: 15rpx 0;
						}
					}
					&::after{
						border: 0;
					}
				}
			}
		}
	}
	.scrollIconsBox{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		padding: 20rpx;
		background-color: #eeeeee;
		
		view{
			color: #1D2129;
			background: #ffffff;
			border-radius:20rpx;
			font-size: 28rpx;
			margin: 0 10rpx;
			padding: 5rpx 20rpx;
			&.active{
				color: #4CA2EC;
			}
		}
	}
</style>